1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<script>
import { goto } from "$app/navigation";
import { onMount } from "svelte";
import { browser } from "$app/environment";
import { t } from "$lib/translations";
import {
back,
copy,
f,
s,
toFiat,
post,
sats,
success,
types,
} from "$lib/utils";
import Avatar from "$comp/Avatar.svelte";
import Icon from "$comp/Icon.svelte";
import { format } from "date-fns";
import { PUBLIC_EXPLORER as expl } from "$env/static/public";
let { data } = $props();
let { user, payment: p } = data;
let { username } = user;
let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
let a = Math.abs(amount);
onMount(() => {
if (browser) {
let main = document.querySelector("main");
main.style.paddingBottom = "0";
window.onfocus = () => goto(`/payment/${id}`);
window.print();
}
});
fee = fee || 0;
</script>
<div class="space-y-5">
<div>
<span class="text-lg text-secondary">Amount</span>
<div>
{f(toFiat(a, rate), currency)}
</div>
</div>
{#if tip}
<div>
<span class="text-lg text-secondary">Tip</span>
<div>
{f(toFiat(tip, rate), currency)}
({Math.round((tip * 100) / Math.abs(a))}%)
</div>
</div>
<div>
<span class="text-lg text-secondary">Total</span>
<div>
{f(toFiat(a + (tip || 0), rate), currency)}
</div>
</div>
{/if}
<div>
<span class="text-lg text-secondary">Date</span>
<div>
{format(new Date(created), "MMMM d")},
{format(new Date(created), "h:mm aaa")}
</div>
</div>
{#if type === "bitcoin"}
<div>
<span class="text-lg text-secondary">Txid</span>
<div class="flex">
<div>
{id}
</div>
</div>
</div>
{/if}
</div>
<a href={`/payment/${id}`}>
<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
</a>
|